<template>
  <div id="sidebar">
    <el-col :span="12">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>线索管理</span>
          </template>
          <el-menu-item @click="toClueEnter">线索录入</el-menu-item>
          <el-menu-item @click="toClueView">查看线索</el-menu-item>
          <el-menu-item @click="toClueStatistics">线索统计</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item @click="toUserInfoView">用户信息</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>中学管理</span>
          </template>
          <el-menu-item @click="toAddSchoolView">添加中学</el-menu-item>
          <el-menu-item @click="toViewSchoolView">信息查看</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>城市管理</span>
          </template>
          <el-menu-item @click="toProvinceManage">省份管理</el-menu-item>
          <el-menu-item @click="toCityManageView">城市管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "SideBar",
  data() {
    return {
      isCollapse: true,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 前往线索录入页面
    toClueEnter() {
      if (this.$route.path != "/clue/enter") {
        this.$router.push("/clue/enter");
      }
    },
    // 前往线索查看页面
    toClueView() {
      if (this.$route.path != "/clue/view") {
        this.$router.push("/clue/view");
      }
    },
    toUserInfoView() {
      if (this.$route.path != "/user/info/view") {
        this.$router.push("/user/info/view");
      }
    },
    toAddSchoolView() {
      if (this.$route.path != "/school/add") {
        this.$router.push("/school/add");
      }
    },
    toViewSchoolView() {
      if (this.$route.path != "/school/view") {
        this.$router.push("/school/view");
      }
    },
    toCityManageView() {
      if (this.$route.path != "/city/city/manage") {
        this.$router.push("/city/city/manage");
      }
    },
    toProvinceManage() {
      if (this.$route.path != "/city/province/manage") {
        this.$router.push("/city/province/manage");
      }
    },
    toClueStatistics() {
      if (this.$route.path != "/clue/statistics") {
        this.$router.push("/clue/statistics");
      }
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.sidebar {
  margin-left: 10px;
  margin-top: 4vh;
}
</style>
